<template>
<div>
  <div style="margin-bottom:12px; text-align:right;">
      <el-button type="success" @click="addList" size="small">添加</el-button>
    </div>
    <div class="menulist-head-u">
      <div class="item-text">菜单标题</div>
      <div class="item-order">排序</div>
      <div class="item-opt">操作</div>
    </div>
    <div class="menulist-u">
      <el-scrollbar style="height:100%;">
      <ul>
        <li v-for="(item, index) in data.list" :key="index">
          <div class="item">
            <div class="item-text">{{item.text}}</div>
            <div class="item-order">
              <div class="noselect" style="padding: 0 12px;">
                <span @click.stop='orderLeft(index, -1)'><i
                    :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow506':true , 'displayNo': true}"></i>
                </span>
                <span @click.stop='orderUp(index, -1)'><i
                    :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true , 'displayNo': index === 0}"></i>
                </span>
                <span @click.stop='orderDown(index, -1)'>
                  <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo': index === (data.list.length - 1)}"></i>
                </span>
                <span @click.stop='orderRight(index, -1)'>
                  <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow484':true, 'displayNo': index === 0 || (item.children && item.children.length>0)}"></i>
                </span>
              </div>
            </div>
            <div class="item-opt">
              <el-button @click="editorDataItem(index, -1)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteDataItem(index, -1)" type="text" size="small">删除</el-button>
            </div>
          </div>
          <ul class="sub-u" v-if="item.children && item.children.length>0">
            <li v-for="(ite, indx) in item.children" :key="indx">
              <div class="item">
                <div class="item-text">&gt; &nbsp;{{ite.text}}</div>
                <div class="item-order">
                  <div class="noselect" style="padding: 0 12px;">
                    <span @click.stop='orderLeft(indx, index)'><i
                        :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow506':true , 'displayNo': false}"></i>
                    </span>
                    <span @click.stop='orderUp(indx, index)'><i
                        :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true , 'displayNo': indx === 0}"></i>
                    </span>
                    <span @click.stop='orderDown(indx, index)'>
                      <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo': indx === (item.children.length - 1)}"></i>
                    </span>
                    <span @click.stop='orderRight(indx, index)'>
                      <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow484':true, 'displayNo': true}"></i>
                    </span>
                  </div>
                </div>
                <div class="item-opt">
                  <el-button @click="editorDataItem(indx, index)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteDataItem(indx, index)" type="text" size="small">删除</el-button>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      </el-scrollbar>
    </div>
    <DialogEditorMenuItem ref="dialogEditorMenuItem" :list="data.list"/>
</div>
</template>
<script>
import DialogEditorMenuItem from '@/components/common/design/dialog/component/menu/DialogEditorMenuItem.vue'
export default {
  props: {
    data: {
      type: Object
    }
  },
  methods: {
    addList () {
    // 弹窗然后编辑最后回调添加内容
      let emptyDataItem = {
        text: '',
        href: '',
        target: '_self',
        level: -1
      }
      this.$refs['dialogEditorMenuItem'].open('添加菜单数据内容', emptyDataItem, -1, (dataItem) => {
        let dataItemN = {
          text: dataItem.text,
          href: dataItem.href,
          target: dataItem.target,
          cur: false
        }
        if (dataItem.level === -1) {
          this.data.list.push(dataItemN)
        } else if (dataItem.level >= 0) {
          if (this.data.list[dataItem.level].children) {
            this.data.list[dataItem.level].children.push(dataItemN)
          } else {
            this.data.list[dataItem.level].children = []
            this.data.list[dataItem.level].children.push(dataItemN)
          }
        }
        this.data.list = JSON.parse(JSON.stringify(this.data.list))
      })
    },
    orderLeft (index, level) {
      if (level === -1) {
        return
      }
      let temp = this.data.list[level].children[index]
      if (this.data.list[level].children.length > 1) {
        this.data.list[level].children.splice(index, 1)
      } else {
        delete this.data.list[level].children
      }
      this.data.list.splice(level + 1, 0, temp)
    },
    orderUp (index, level) {
      if (index === 0) {
        return
      }
      if (level === -1) {
        let order = this.data.list
        let temp = order[index - 1]
        order[index - 1] = order[index]
        order[index] = temp
        this.data.list = JSON.parse(JSON.stringify(order))
      } else if (level >= 0 && this.data.list[level].children && this.data.list[level].children.length > 0) {
        let order = this.data.list[level].children
        let temp = order[index - 1]
        order[index - 1] = order[index]
        order[index] = temp
        this.data.list[level].children = JSON.parse(JSON.stringify(order))
      }
    },
    orderDown (index, level) {
      if (level === -1) {
        if (index === (this.data.list.length - 1)) {
          return
        }
        let order = this.data.list
        let temp = order[index + 1]
        order[index + 1] = order[index]
        order[index] = temp
        this.data.list = JSON.parse(JSON.stringify(order))
      } else if (level >= 0 && this.data.list[level].children && this.data.list[level].children.length > 0) {
        if (index === (this.data.list[level].children.length - 1)) {
          return
        }
        let order = this.data.list[level].children
        let temp = order[index + 1]
        order[index + 1] = order[index]
        order[index] = temp
        this.data.list[level].children = JSON.parse(JSON.stringify(order))
      }
    },
    orderRight (index, level) {
      if (level >= 0 || index === 0) {
        return
      }
      if (this.data.list[index].children && this.data.list[index].children.length > 0) {
        return
      }
      let temp = this.data.list[index]
      if (this.data.list[index - 1].children) {
        this.data.list[index - 1].children.push(temp)
      } else {
        this.data.list[index - 1].children = []
        this.data.list[index - 1].children.push(temp)
      }
      this.data.list.splice(index, 1)
    },
    deleteDataItem (index, level) {
      if (level === -1) {
        this.data.list.splice(index, 1)
      } else {
        this.data.list[level].children.splice(index, 1)
      }
    },
    editorDataItem (index, level) {
      let item = null
      if (level === -1) {
        item = JSON.parse(JSON.stringify(this.data.list[index]))
      } else {
        item = JSON.parse(JSON.stringify(this.data.list[level].children[index]))
      }
      if (!item) {
        return
      }
      item.level = level
      this.$refs['dialogEditorMenuItem'].open('编辑菜单数据内容', item, index, (dataItem) => {
        let dataItemN = {
          text: dataItem.text,
          href: dataItem.href,
          target: dataItem.target,
          cur: false
        }
        if (dataItem.children) {
          dataItemN.children = dataItem.children
        }
        if (dataItem.level === level) {
          if (level === -1) {
            this.data.list.splice(index, 1, dataItemN)
          } else {
            this.data.list[level].children.splice(index, 1, dataItemN)
          }
        } else {
          if (level === -1 && dataItem.level >= 0) {
            if (this.data.list[dataItem.level].children) {
              this.data.list[dataItem.level].children.push(dataItemN)
            } else {
              this.data.list[dataItem.level].children = []
              this.data.list[dataItem.level].children.push(dataItemN)
            }
            this.data.list.splice(index, 1)
          } else if (level !== -1 && dataItem.level === -1) {
            if (this.data.list[level].children.length > 1) {
              this.data.list[level].children.splice(index, 1)
            } else {
              delete this.data.list[level].children
            }
            this.data.list.push(dataItemN)
          } else if (level !== -1 && dataItem.level >= 0) {
            if (this.data.list[level].children.length > 1) {
              this.data.list[level].children.splice(index, 1)
            } else {
              delete this.data.list[level].children
            }
            if (this.data.list[dataItem.level].children) {
              this.data.list[dataItem.level].children.push(dataItemN)
            } else {
              this.data.list[dataItem.level].children = []
              this.data.list[dataItem.level].children.push(dataItemN)
            }
          }
        }
        this.data.list = JSON.parse(JSON.stringify(this.data.list))
      })
    }
  },
  components: {
    DialogEditorMenuItem
  }
}
</script>
<style scoped lang="scss">
.menulist-head-u{
  padding: 5px 0 8px;
  color: #555;
  font-weight: bold;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  text-align: center;
  width: 100%;
  justify-content:space-between;
  .item-text {
    text-align: left;
    width: 400px;
    padding-left: 10px;
  }
  .item-order{
    width: 135px;
  }
  .item-opt{
    width: 100px;
  }
}
.menulist-u{
  height: calc(100vh - 320px);
  max-height: 350px;
  /deep/ {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .is-horizontal{
      display: none;
    }
  }
}
.menulist-u li{
  border-bottom: 1px solid #ebeef5;
  .item {
    padding: 5px 0;
    display: flex;
    text-align: center;
    width: 100%;
    justify-content:space-between;
    align-items:center;
    .item-text {
      text-align: left;
      width: 400px;
      padding-left: 10px;
    }
    .item-order{
      width: 135px;
    }
    .item-opt{
      width: 100px;
    }
  }
  ul li{
    border-top: 1px solid #ebeef5;
    border-bottom:0;
    .item .item-text {
      padding-left: 30px;
    }
  }
}
.menulist-u .icon {
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  height: 100%;
  display: inline-block;
}
.menulist-u .icon:hover {
  color: #409eff;
}
.menulist-u .displayNo {
  color: #888888;
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
